/*滚动条样式*/
::-webkit-scrollbar:horizontal{ height: 4px;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background-color:#00aff0;}
::-webkit-scrollbar-thumb{background-color:rgb(255,64,129)}
::-webkit-scrollbar-thumb:hover {background-color:rgb(255,64,129)}
::-webkit-scrollbar-thumb:active {background-color:rgb(255,64,129)}
/* 设置布局变化的动画效果 */
.layoutmain,.layoutmain *{
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease; /* Firefox 4 */
    -webkit-transition:all 0.3s ease; /* Safari and Chrome */
    -o-transition:all 0.3s ease; /* Opera */
}
/* 菜单和内容的基本布局 */
.layoutcontent{
    overflow:auto;
    position:absolute;
    left:240px;
    top:64px;
    bottom:0px;
    _height:100%;
    width: calc(100% - 240px);
}
.layoutmenu{
    width:240px;
    overflow:auto;
    position:absolute;
    left:0;
    top:64px;
    bottom:0px;
    _height:100%;
    overflow:auto;
    background: #eee;
    z-index: 2;
}
/* 菜单滚动条不显示 */
.layoutmenu::-webkit-scrollbar{width:0px;}
.layoutmenu::-webkit-scrollbar:horizontal{ height: 0px;}
/* 隐藏菜单 */
.menuhide .layoutmenu{
    left:-240px;
}
.menuhide .layoutcontent{
    width: 100%;
    left:0px;
}
/* 头部吸附按钮的位置 */
.topbutton{
    bottom: -27px;
    margin-bottom: 0px;
}
/* 头部logo显示 */
.mdl-layout__header-row .mdl-layout-title{
    height: 64px;
    background: url(../../img/framaterial_logo8.png) center center/75% no-repeat #f7f7f7;
    text-indent: -9999px!important;
    width: 160px;
    position: absolute;
    top:0px;
}
/*布局适应小屏*/
@media all and (max-width: 768px) {
    .layoutmenu {
        width:90%;
        left:-90%;
        box-shadow: 0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);
        background: #fff;
    }
    .layoutcontent{
        width: 100%;
        left:0px;
    }
    .menuhide .layoutmenu{
        left:0px;
    }
    .layoutmenu .mdl-navigation .mdl-navigation__link--current {
	    background-color: #e0e0e0; 
	}
}
/* 适应导航条变化 */
@media screen and (max-width: 1024px) {
    .layoutmenu {
        top:56px;
    }
    .layoutcontent{
        top:56px;
    }
    .mdl-layout__header-row .mdl-layout-title{
        width: 168px;
        height: 56px;
    }
}
/* 菜单样式 */
.layoutmenu .mdl-navigation {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.layoutmenu .mdl-navigation .mdl-navigation__link {
    display: block;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 16px 20px;
    margin: 0;
    color: #757575
}
.layoutmenu .mdl-navigation .mdl-navigation__link .material-icons{
    padding-right: 22px;
}
.layoutmenu .mdl-navigation .mdl-navigation__link:hover {
    background-color: #e0e0e0
}
.layoutmenu .mdl-navigation .mdl-navigation__link--current {
    /* background-color: #e0e0e0; */
    color: #ff4081
}
/* 页面加载进度条的样式 */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ff4081;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
/* 向下隐藏布局 */
.layouthide .top100{
	top:100%;
	opacity:0.1;
}
/* 向左隐藏布局 */
.layouthide .left100{
	left:-100%;
	opacity:0.1;
}
/* 电脑和平板分界线修改为1024 */
@media (min-width: 480px) and (max-width:1023px) {
	.mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
	    width: calc(50% - 16px);
	}
	.mdl-cell {
	    margin: 8px;
	    width: calc(50% - 16px);
	}
}
.layoutcontent .mdl-cell{
	background: #fff;
}

/* ---列表样式--------------------------------------- */
.showcontentlistcol{
	position: relative;
	float: left;
	margin: 24px 0px;
    padding: 1%;
    padding-top: 0px;
}
.showcontentlist{
	padding: 0 10px;
}
.layoutcontent .mdl-card__media {
  box-sizing: border-box;
  background-size: cover;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-color: rgba(16, 97, 138, 0.35);;
  height:200px;
}
.layoutcontent .mdl-card__media .articletitle{
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    margin: 0;
    padding: 5px;
    font-size: 20px;
}
.layoutcontent .mdl-card__media .articletitle a{
    color:#fff;
}
.layoutcontent .mdl-card__media .articleclicknum{
    position: absolute;
    top: 35px;
    right: 8%;
    color: #fff;
}
.showcontentlistcol .mdl-card__media .articleclicknum{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 0 5px;
}
.showcontentlistcol .mdl-card:hover{
	top:-2px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}
.layoutcontent .mdl-card__media .articletitle a{
    text-decoration: none;
    cursor: auto;
}
/* 旋转动画 */
.rotate_effect{
	animation:circle 1s infinite linear;
    -webkit-animation:circle 1s infinite linear;/*匀速 循环*/       
}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
@keyframes circle
{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
.articletag .mdl-button{
	margin-right: 5px;
	min-width: 0px; 
	height: 20px;
    line-height: 20px;
    padding: 0 6px;
    color:#757575;
}
.articletag{
    padding: 6px;
    color:#000;
    width: initial;
    background: #eee;
}
/* 评论列表 */
.commentListterm{
	margin: 20px 0;
}
#articlecontent img{
	max-width:100%;
}